<template>
  <div class="ticket-model-container ">
    <div class="ticket-title-container flex-normal">
      <div v-for="(tab, index) in tabList" :key="index" 
      :class="['title-content flex-center', tab.name == currentTab.name && 'active']"
      @click="tabChange(tab)">
        <span class="title-txt">{{tab.label}}（{{tab.list.length}}）</span>
      </div>
    </div>
    <div :class="['ticket-list-main', currentTab.name]"> 
      <span class="kcm-btn" v-if="currentTab.name == 'kcm' && isExport" @click="exportTicket">导出待核销券码</span>
      <el-scrollbar>
        <!-- 库存券码 -->
        <template v-if="currentTab.name == 'kcm'">
          <div class="item flex-normal" v-for="(item, index) in currentTab.list" :key="index">
            <span class="item-desc">{{item.cardRollCode}}</span>
          </div>
        </template>
        <!-- 已兑换 -->
        <template v-if="currentTab.name == 'ydh'">
          <div class="item flex-normal" v-for="(item, index) in currentTab.list" :key="index">
            <span class="item-num">{{item.cardRollCode}}</span>
            <span class="item-time">{{item.updateTime}}</span>
            <span class="item-desc">由</span>
            <span class="item-user">{{item.exchangeUserId}}</span>
            <span class="item-desc">在兑换</span>
          </div>
        </template>
        <!-- 已核销 -->
        <template v-if="currentTab.name == 'yhx'">
          <div class="item flex-normal" v-for="(item, index) in currentTab.list" :key="index">
            <span class="item-num">{{item.cardRollCode}}</span>
            <span class="item-time">{{item.updateTime}}</span>
            <span class="item-desc">由</span>
            <span class="item-user">疯狂的校长</span>
            <span class="item-desc">在</span>
            <span class="item-user">天猫养车（江宁店）</span>
            <span class="item-desc">核销</span>
          </div>
        </template>
        <!-- 已分配 -->
        <template v-if="currentTab.name == 'yfp'">
          <div class="item flex-normal">
            <span class="item-num">72882KZLLALWEQ11100222</span>
            <span class="item-time">2023-2-12 17：00</span>
            <span class="item-desc">2023-2-12 17：00 已分配给</span>
            <span class="item-user">疯狂的校长</span>
          </div>
          <div class="item flex-normal">
            <span class="item-num">72882KZLLALWEQ11100222</span>
            <span class="item-time">2023-2-12 17：00</span>
            <span class="item-desc">2023-2-12 17：00 已分配给</span>
            <span class="item-user">疯狂的校长</span>
          </div>
          <div class="item flex-normal">
            <span class="item-num">72882KZLLALWEQ11100222</span>
            <span class="item-time">2023-2-12 17：00</span>
            <span class="item-desc">2023-2-12 17：00 已分配给</span>
            <span class="item-user">疯狂的校长</span>
          </div>
        </template>
      </el-scrollbar>
    </div>
    <div class="ticket-desc flex-normal">
      <i class="desc-icon el-icon-info"></i>
      <span class="desc-txt">如需增加库存，请直接在库存券码中追加，每行一个</span>
    </div>
  </div>
</template>

<script>
import {generateCardRollList, exportTicket} from '@/api/activeManage/active'
const tabList = [
  {label: '库存券码', name: 'kcm', list: []},
  {label: '已兑换', name: 'ydh', list: []},
  {label: '已核销', name: 'yhx', list: []},
  {label: '已分配', name: 'yfp', list: []},
]
export default {
  name: 'ticketModel',
  props: {
    activeId: {
      type: [String, Number],
      default: ''
    },
    arr: {
      type: Array,
      default: ['库存券码', '已兑换', '已核销']
    },
    isExport: {
      type: Boolean,
      default: true
    },
    cardList: {
      type: Array,
      default: []
    }
  },
  watch: {
    arr: {
      handler: function (list) {
        let _self = this
        _self.tabList = tabList.filter(tab => list.includes(tab.label))
        _self.currentTab = _self.tabList[0]
      },
      immediate: true
    },
    cardList: {
      handler: function (list) {
        let _self = this
        _self.tabList.forEach(tab => {
          if(tab.name == 'kcm') {
            tab.list = [...tab.list, ...list]
            _self.$emit('change', tab.list.filter(i => !i.activityId))
          }
        })
      },
      immediate: true
    }
  },
  data() {
    return {
      currentTab: {},
      tabList: [],
      
    }
  },
  mounted(){
    let _self = this
    _self.queryTicketList()
  },
  methods: {
    tabChange(tab){
      let _self = this
      _self.currentTab = tab
    },
    async queryTicketList(){
      let _self = this
      let params = {activityId: _self.activeId || '', ..._self.currentTab.params}
      if(!params.activityId){

      }else{
        await generateCardRollList(params).then(
          res => {
            _self.tabList.forEach(tab => {
              if(tab.name == 'kcm') {
                _self.$set(tab, 'list', res.rows)
              } else if(tab.name == 'ydh') {
                _self.$set(tab, 'list', res.rows.filter(i => i.exchange == 1))
              } else if(tab.name == 'yhx') {
                _self.$set(tab, 'list', res.rows.filter(i => i.writeOff == 1))
              }
            })
        })
      }
      
    },
    exportTicket(){
      let _self = this
      let params = {
        activityId: _self.activeId,
        writeOff: '0'
      }
      exportTicket(params, '未核销券码')
    },
  }
}
</script>

<style lang="scss" scoped>
.ticket-model-container{
  .ticket-title-container{
    .title-content{
      height: vh(40);
      margin-right: vw(30);
      cursor: pointer;
      &.active{
        .title-txt{
          color: #0003AA;
          font-size: 13px;
        }
      }
      .title-txt{
        color: #666666;
        font-size: 13px;
      }
    }
  }
  .ticket-list-main{
    border: 1px solid #DDDDDD;
    border-radius: vh(3);
    padding: vh(13) vw(12);
    overflow: hidden;
    height: vh(300);
    margin-top: vh(10);
    background: rgba(237, 237, 237, 0.4);
    position: relative;
    line-height: normal;
    .kcm-btn{
      position: absolute;
      font-size: vh(12);
      color: #0003AA;
      bottom: vh(15);
      right: vw(10);
      cursor: pointer;
      z-index: 100;
    }
    .kcm-val-content{
      min-height: vh(200);
      font-size: 13px;
    }
    .item{
      padding-right: vw(25);
      margin-bottom: vh(15);
      .item-num, .item-user{
        font-size: 13px;
        color: #0003AA;
      }
      .item-time, .item-desc{
        font-size: 13px;
        color: #9E9D9D;
        margin: 0 vw(10);
      }
    }
  }
  .ticket-desc{
    margin-top: vh(10);
    .desc-icon{
      color: #F7B212;
    }
    .desc-txt{
      margin-left: vw(10);
      font-size: vh(12);
      color: #7F7F7F;
    }
  }
}
</style>
